/*
 * @Author: hongbin
 * @Date: 2022-11-20 14:30:24
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-01 11:46:29
 * @Description:在线人数
 */

import { FC, memo, useEffect, useState } from "react";
import styled from "styled-components";
import { SocketManager } from "../../socket";
import { flexCenter } from "../../styled";

interface IProps {}
/**
 * 在线人数显示组件
 */
const OnLinePeopleCount: FC<IProps> = () => {
    const [onlinePeopleNumber, setOnlinePeopleNumber] = useState(1);

    useEffect(() => {
        SocketManager.listenOnce("getOnlineCount", (number) => {
            setOnlinePeopleNumber(number);
        }).listen("onlinePeopleNumberChange", (number) => {
            console.log("返回在线人数:", number);
            setOnlinePeopleNumber(number);
        });
    }, []);

    return (
        <Container>
            <i></i>
            <span>在线人数</span>
            <code>{onlinePeopleNumber}</code>
        </Container>
    );
};

export default memo(OnLinePeopleCount);

const Container = styled.div`
    position: absolute;
    bottom: 1vmin;
    right: 1vmin;
    font-size: 1vmax;
    z-index: 12;
    ${flexCenter};
    & > i {
        width: 1vmin;
        height: 1vmin;
        border-radius: 1vmin;
        background: #002300;
    }
    & > span {
        margin-right: 1vmax;
        margin-left: 1vmin;
        color: #002300;
    }
    & > code {
        color: #fff;
    }
`;
